<template>
  <div class="vLeftNav" v-if="themeColorIconNameApply!==null">
    <el-menu
      default-active="1-4-1"
      :class="{elMenu1:stat==false,elMenu2:stat==true}"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
    >
      <el-submenu index="1">
        <template slot="title">
          <div
            @mouseenter="mouseoverState('marketing')"
            @mouseleave="mouseoutState('marketing')"
            :style="{color:themeColorIconNameApply[defauleTheme].marketing===themeColorIconNameHover[defauleTheme].marketing?InitColor.fontColorStatic:InitColor.fontColorHover}"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="themeColorIconNameApply[defauleTheme].marketing"></use>
            </svg>
            <span slot="title" :class="{menuNavMain:stat==false}">营销</span>
          </div>
        </template>
        <el-menu-item-group class="mainul">
          <span slot="title">营销管理</span>
          <el-menu-item index="1-1" class="navStyle">
            <router-link to="/marketingsOrder">订单促销</router-link>
            <router-link to="/marketingsGoods">商品促销</router-link>
          </el-menu-item>
          <el-menu-item index="1-2" class="navStyle">
            <router-link to="/MarketingCoupon">优惠券</router-link>
            <router-link to="/marketingsSale">商品预售</router-link>
          </el-menu-item>
          <el-menu-item index="1-3" class="navStyle">
            <router-link to="/marketingMall">商城装修</router-link>
            <router-link to="/marketingsNotice">通知公告</router-link>
          </el-menu-item>
          <el-menu-item index="1-4" class="navStyle">
            <router-link to="/marketingInfo">短信提醒</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <div
            @mouseenter="mouseoverState('commodity')"
            @mouseleave="mouseoutState('commodity')"
            :style="{color:themeColorIconNameApply[defauleTheme].commodity===themeColorIconNameHover[defauleTheme].commodity?InitColor.fontColorStatic:InitColor.fontColorHover}"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="themeColorIconNameApply[defauleTheme].commodity"></use>
            </svg>
            <span slot="title" :class="{menuNavMain:stat==false}">商品</span>
          </div>
        </template>
        <el-menu-item-group class="mainul">
          <span slot="title">商品管理</span>
          <el-menu-item index="1-1" class="navStyle">
            <router-link to="/commodityList">商品列表</router-link>
            <router-link to="/commodityPictures">商品图片</router-link>
          </el-menu-item>
          <el-menu-item index="1-2" class="navStyle">
            <router-link to="/commodityPrice">商品价格</router-link>
            <router-link to="/businessShield">经营屏蔽</router-link>
          </el-menu-item>
          <el-menu-item index="1-3" class="navStyle">
            <router-link to="/basicInformation">基础信息</router-link>
            <router-link to="/commodityStorehouse">商品库</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <div
            @mouseenter="mouseoverState('orderForm')"
            @mouseleave="mouseoutState('orderForm')"
            :style="{color:themeColorIconNameApply[defauleTheme].orderForm===themeColorIconNameHover[defauleTheme].orderForm?InitColor.fontColorStatic:InitColor.fontColorHover}"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="themeColorIconNameApply[defauleTheme].orderForm"></use>
            </svg>
            <span slot="title" :class="{menuNavMain:stat==false}">订单</span>
          </div>
        </template>
        <el-menu-item-group class="mainul">
          <span slot="title">订单管理</span>
          <el-menu-item index="1-1" class="navStyle">
            <router-link to="/orders">订货单</router-link>
            <router-link to="/auditedOrder">待审核订单</router-link>
          </el-menu-item>
          <el-menu-item index="1-2" class="navStyle">
            <router-link to="/valetOrder">代客下单</router-link>
            <router-link to="/receivablesOrder">代收款订单</router-link>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <span slot="title">订单汇总</span>
          <el-menu-item index="1-3" class="navStyle">
            <router-link to="/shipManage">发货记录</router-link>
            <router-link to="/index">按发货汇总</router-link>
          </el-menu-item>
          <el-menu-item index="1-4" class="navStyle">
            <router-link to="/index">按商品汇总</router-link>
            <router-link to="/index">按客户汇总</router-link>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <span slot="title">退货管理</span>
          <el-menu-item index="1-5" class="navStyle">
            <router-link to="/index">退货单</router-link>
            <router-link to="/newOutOrder">新增退货单</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <div
            @mouseenter="mouseoverState('client')"
            @mouseleave="mouseoutState('client')"
            :style="{color:themeColorIconNameApply[defauleTheme].client===themeColorIconNameHover[defauleTheme].client?InitColor.fontColorStatic:InitColor.fontColorHover}"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="themeColorIconNameApply[defauleTheme].client"></use>
            </svg>
            <span slot="title" :class="{menuNavMain:stat==false}">客户</span>
          </div>
        </template>
        <el-menu-item-group class="mainul">
          <span slot="title">客户管理</span>
          <el-menu-item index="1-1" class="navStyle">
            <router-link to="/customerList">客户列表</router-link>
            <router-link to="/customerJoin">客户加盟</router-link>
          </el-menu-item>
          <el-menu-item index="1-2" class="navStyle">
            <router-link to="/customerConsulation">客户咨询</router-link>
            <router-link to="/customerAnalysis">下单分析</router-link>
          </el-menu-item>
          <el-menu-item index="1-3" class="navStyle">
            <router-link to="/customerSearch">搜索日志</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <div
            @mouseenter="mouseoverState('warehouse')"
            @mouseleave="mouseoutState('warehouse')"
            :style="{color:themeColorIconNameApply[defauleTheme].warehouse===themeColorIconNameHover[defauleTheme].warehouse?InitColor.fontColorStatic:InitColor.fontColorHover}"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="themeColorIconNameApply[defauleTheme].warehouse"></use>
            </svg>
            <span slot="title" :class="{menuNavMain:stat==false}">仓库</span>
          </div>
        </template>
        <el-menu-item-group class="mainul">
          <span slot="title">仓库管理</span>
          <el-menu-item index="1-1" class="navStyle">
            <router-link to="/outStock">商品出库</router-link>
            <router-link to="/inStock">商品入库</router-link>
          </el-menu-item>
          <el-menu-item index="1-2" class="navStyle">
            <router-link to="/stockpile">商品库存</router-link>
            <router-link to="/allocate">库存调拨</router-link>
          </el-menu-item>
          <el-menu-item index="1-3" class="navStyle">
            <router-link to="/stockChecks">库存盘点</router-link>
            <router-link to="/costAdjustment">成本调整</router-link>
          </el-menu-item>
          <el-menu-item index="1-4" class="navStyle">
            <router-link to="/inventoryCost">库存成本</router-link>
            <router-link to="/stockDetails">出入库明细</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">
          <div
            @mouseenter="mouseoverState('purchase')"
            @mouseleave="mouseoutState('purchase')"
            :style="{color:themeColorIconNameApply[defauleTheme].purchase===themeColorIconNameHover[defauleTheme].purchase?InitColor.fontColorStatic:InitColor.fontColorHover}"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="themeColorIconNameApply[defauleTheme].purchase"></use>
            </svg>
            <span slot="title" :class="{menuNavMain:stat==false}">采购</span>
          </div>
        </template>
        <el-menu-item-group class="mainul">
          <span slot="title">采购管理</span>
          <el-menu-item index="1-1" class="navStyle">
            <router-link to="/purchasingOrder">采购订单</router-link>
            <router-link to="/purchaseReturn">采购退货</router-link>
          </el-menu-item>
          <el-menu-item index="1-2" class="navStyle">
            <router-link to="/management">供应商管理</router-link>
            <router-link to="/reconciliation">供应商对账</router-link>
          </el-menu-item>
          <el-menu-item index="1-3" class="navStyle">
            <router-link to="/inventoryWarning">库存预警</router-link>
            <router-link to="/backorder">缺货商品</router-link>
          </el-menu-item>
          <el-menu-item index="1-4" class="navStyle">
            <router-link to="/intelligent">智能采购</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="7">
        <template slot="title">
          <div
            @mouseenter="mouseoverState('finance')"
            @mouseleave="mouseoutState('finance')"
            :style="{color:themeColorIconNameApply[defauleTheme].finance===themeColorIconNameHover[defauleTheme].finance?InitColor.fontColorStatic:InitColor.fontColorHover}"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="themeColorIconNameApply[defauleTheme].finance"></use>
            </svg>
            <span slot="title" :class="{menuNavMain:stat==false}">财务</span>
          </div>
        </template>
        <el-menu-item-group class="mainul">
          <span slot="title">财务管理</span>
          <el-menu-item index="1-1" class="navStyle">
            <router-link to="/receipt">收款单</router-link>
            <router-link to="/paymentSlip">付款单</router-link>
          </el-menu-item>
          <el-menu-item index="1-2" class="navStyle">
            <router-link to="/expenditure">收支流水</router-link>
            <router-link to="/advanceDeposit">预存款</router-link>
          </el-menu-item>
          <el-menu-item index="1-3" class="navStyle">
            <router-link to="/verify">客户对账</router-link>
            <router-link to="/fundsAccount">资金账户</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="8">
        <template slot="title">
          <div
            @mouseenter="mouseoverState('statement')"
            @mouseleave="mouseoutState('statement')"
            :style="{color:themeColorIconNameApply[defauleTheme].statement===themeColorIconNameHover[defauleTheme].statement?InitColor.fontColorStatic:InitColor.fontColorHover}"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="themeColorIconNameApply[defauleTheme].statement"></use>
            </svg>
            <span slot="title" :class="{menuNavMain:stat==false}">报表</span>
          </div>
        </template>
        <el-menu-item-group class="mainul">
          <span slot="title">统计报表</span>
          <el-menu-item index="1-1" class="navStyle">
            <router-link to="/orderReport">订单统计</router-link>
            <router-link to="/goodsReport">商品销售</router-link>
          </el-menu-item>
          <el-menu-item index="1-2" class="navStyle">
            <router-link to="/clientReport">客户统计</router-link>
            <router-link to="/employeeReport">业绩统计</router-link>
          </el-menu-item>
          <el-menu-item index="1-3" class="navStyle">
            <router-link to="/saleMarginReport">销售毛利</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- <div style="width:108px;"> -->
      <el-submenu index="9">
        <template slot="title">
          <div
            @mouseenter="mouseoverState('use')"
            @mouseleave="mouseoutState('use')"
            :style="{color:themeColorIconNameApply[defauleTheme].use===themeColorIconNameHover[defauleTheme].use?InitColor.fontColorStatic:InitColor.fontColorHover}"
            @click="$router.push({path:'/application'})"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="themeColorIconNameApply[defauleTheme].use"></use>
            </svg>
            <span slot="title" :class="{menuNavMain:stat==false,guy:true}">应用</span>
          </div>
        </template>
      </el-submenu>
      <el-submenu index="10">
        <template slot="title">
          <div
            @mouseenter="mouseoverState('set')"
            @mouseleave="mouseoutState('set')"
            :style="{color:themeColorIconNameApply[defauleTheme].set===themeColorIconNameHover[defauleTheme].set?InitColor.fontColorStatic:InitColor.fontColorHover}"
          >
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="themeColorIconNameApply[defauleTheme].set"></use>
            </svg>
            <span slot="title" :class="{menuNavMain:stat==false}">设置</span>
          </div>
        </template>
        <el-menu-item-group class="mainul settingS">
          <span slot="title">企业设置</span>
          <el-menu-item index="1-1" class="navStyle">
            <router-link to="/enterpriseInformation">企业信息</router-link>
            <router-link to="/eusinessAnnouncement">企业公告</router-link>
            <router-link to="/wechatSettings">微信设置</router-link>
          </el-menu-item>
          <el-menu-item index="1-2" class="navStyle">
            <router-link to="/employeeAccount">员工账号</router-link>
            <router-link to="/departmentalSettings">部门设置</router-link>
            <router-link to="/permissionSettings">权限设置</router-link>
          </el-menu-item>
          <el-menu-item index="1-3" class="navStyle">
            <router-link to="/printTemplate">打印模板</router-link>
            <router-link to="/processSettings">流程设置</router-link>
            <router-link to="/singleNumberSettings">单号设置</router-link>
          </el-menu-item>
          <el-menu-item index="1-3" class="navStyle">
            <router-link to="/systemInitialization">系统初始化</router-link>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group class="mainul settingS">
          <span slot="title">业务设置</span>
          <el-menu-item index="1-1" class="navStyle">
            <router-link to="/mallEstablishment">商城设置</router-link>
            <router-link to="/commoditySettings">商品设置</router-link>
            <router-link to="/salesSettings">销售设置</router-link>
          </el-menu-item>
          <el-menu-item index="1-2" class="navStyle">
            <router-link to="/customerSetup">客户设置</router-link>
            <router-link to="/warehouseSettings">仓库设置</router-link>
            <router-link to="/financialSettings">财务设置</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <!-- </div> -->
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    stat: {
      type: Boolean,
      required: true
    },
    themeColor: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      isCollapse: true,
      // 默认主题
      defauleTheme: '#20ADE5',
      // 主题框架悬停状态图集合
      themeColorIconName: {
        '#EB382F': {
          marketing: '#icon-test427',
          commodity: '#icon-test365',
          orderForm: '#icon-test413',
          client: '#icon-test364',
          warehouse: '#icon-test366',
          purchase: '#icon-test357',
          finance: '#icon-test380',
          statement: '#icon-test358',
          use: '#icon-test404',
          set: '#icon-test375'
        },
        '#FB6321': {
          marketing: '#icon-test397',
          commodity: '#icon-test379',
          orderForm: '#icon-test386',
          client: '#icon-test384',
          warehouse: '#icon-test381',
          purchase: '#icon-test376',
          finance: '#icon-test438',
          statement: '#icon-test422',
          use: '#icon-test434',
          set: '#icon-test445'
        },
        '#CD5511': {
          marketing: '#icon-test407',
          commodity: '#icon-test400',
          orderForm: '#icon-test408',
          client: '#icon-test411',
          warehouse: '#icon-test405',
          purchase: '#icon-test448',
          finance: '#icon-test439',
          statement: '#icon-test449',
          use: '#icon-test403',
          set: '#icon-test436'
        },
        '#DBAF58': {
          marketing: '#icon-test444',
          commodity: '#icon-test447',
          orderForm: '#icon-test432',
          client: '#icon-test431',
          warehouse: '#icon-test1',
          purchase: '#icon-test429',
          finance: '#icon-test435',
          statement: '#icon-test4',
          use: '#icon-test424',
          set: '#icon-test12'
        },
        '#FAB414': {
          marketing: '#icon-test32',
          commodity: '#icon-test27',
          orderForm: '#icon-test20',
          client: '#icon-test37',
          warehouse: '#icon-test35',
          purchase: '#icon-test13',
          finance: '#icon-test15',
          statement: '#icon-test8',
          use: '#icon-test7',
          set: '#icon-test10'
        },
        '#23982D': {
          marketing: '#icon-test24',
          commodity: '#icon-test38',
          orderForm: '#icon-test44',
          client: '#icon-test108',
          warehouse: '#icon-test39',
          purchase: '#icon-test18',
          finance: '#icon-test88',
          statement: '#icon-test23',
          use: '#icon-test14',
          set: '#icon-test75'
        },
        '#F566D3': {
          marketing: '#icon-test117',
          commodity: '#icon-test26',
          orderForm: '#icon-test71',
          client: '#icon-test79',
          warehouse: '#icon-test33',
          purchase: '#icon-test62',
          finance: '#icon-test41',
          statement: '#icon-test60',
          use: '#icon-test65',
          set: '#icon-test84'
        },
        '#C38CFA': {
          marketing: '#icon-test47',
          commodity: '#icon-test90',
          orderForm: '#icon-test51',
          client: '#icon-test81',
          warehouse: '#icon-test128',
          purchase: '#icon-test118',
          finance: '#icon-test68',
          statement: '#icon-test91',
          use: '#icon-test77',
          set: '#icon-test145'
        },
        '#1C69E6': {
          marketing: '#icon-test63',
          commodity: '#icon-test92',
          orderForm: '#icon-test97',
          client: '#icon-test67',
          warehouse: '#icon-test106',
          purchase: '#icon-test144',
          finance: '#icon-test64',
          statement: '#icon-test93',
          use: '#icon-test85',
          set: '#icon-test74'
        },
        '#20ADE5': {
          marketing: '#icon-test80',
          commodity: '#icon-test78',
          orderForm: '#icon-test158',
          client: '#icon-test123',
          warehouse: '#icon-test132',
          purchase: '#icon-test139',
          finance: '#icon-test271',
          statement: '#icon-test295',
          use: '#icon-test317',
          set: '#icon-test311'
        },
        '#0EC2B9': {
          marketing: '#icon-test98',
          commodity: '#icon-test199',
          orderForm: '#icon-test96',
          client: '#icon-test180',
          warehouse: '#icon-test219',
          purchase: '#icon-test152',
          finance: '#icon-test95',
          statement: '#icon-test153',
          use: '#icon-test164',
          set: '#icon-test174'
        },
        '#1B1B1B': {
          marketing: '#icon-test338',
          commodity: '#icon-test430',
          orderForm: '#icon-test433',
          client: '#icon-test336',
          warehouse: '#icon-test334',
          purchase: '#icon-test184',
          finance: '#icon-test363',
          statement: '#icon-test406',
          use: '#icon-test351',
          set: '#icon-test356'
        }
      },
      // 主题框架静态图集合
      themeColorIconNameHover: {
        '#EB382F': {
          marketing: '#icon-test50',
          commodity: '#icon-test30',
          orderForm: '#icon-test55',
          client: '#icon-test66',
          warehouse: '#icon-test28',
          purchase: '#icon-test31',
          finance: '#icon-test29',
          statement: '#icon-test25',
          use: '#icon-test48',
          set: '#icon-test61'
        },
        '#FB6321': {
          marketing: '#icon-test389',
          commodity: '#icon-test369',
          orderForm: '#icon-test426',
          client: '#icon-test378',
          warehouse: '#icon-test372',
          purchase: '#icon-test417',
          finance: '#icon-test377',
          statement: '#icon-test383',
          use: '#icon-test409',
          set: '#icon-test385'
        },
        '#CD5511': {
          marketing: '#icon-test391',
          commodity: '#icon-test428',
          orderForm: '#icon-test398',
          client: '#icon-test440',
          warehouse: '#icon-test396',
          purchase: '#icon-test388',
          finance: '#icon-test399',
          statement: '#icon-test425',
          use: '#icon-test387',
          set: '#icon-test446'
        },
        '#DBAF58': {
          marketing: '#icon-test441',
          commodity: '#icon-test443',
          orderForm: '#icon-test437',
          client: '#icon-test414',
          warehouse: '#icon-test423',
          purchase: '#icon-test442',
          finance: '#icon-test421',
          statement: '#icon-test420',
          use: '#icon-test412',
          set: '#icon-test450'
        },
        '#FAB414': {
          marketing: '#icon-test9',
          commodity: '#icon-test',
          orderForm: '#icon-test34',
          client: '#icon-test19',
          warehouse: '#icon-test6',
          purchase: '#icon-test3',
          finance: '#icon-test42',
          statement: '#icon-test5',
          use: '#icon-test2',
          set: '#icon-test21'
        },
        '#23982D': {
          marketing: '#icon-test40',
          commodity: '#icon-test45',
          orderForm: '#icon-test53',
          client: '#icon-test17',
          warehouse: '#icon-test52',
          purchase: '#icon-test16',
          finance: '#icon-test94',
          statement: '#icon-test11',
          use: '#icon-test22',
          set: '#icon-test110'
        },
        '#F566D3': {
          marketing: '#icon-test50',
          commodity: '#icon-test30',
          orderForm: '#icon-test55',
          client: '#icon-test66',
          warehouse: '#icon-test28',
          purchase: '#icon-test31',
          finance: '#icon-test29',
          statement: '#icon-test25',
          use: '#icon-test48',
          set: '#icon-test61'
        },
        '#C38CFA': {
          marketing: '#icon-test70',
          commodity: '#icon-test59',
          orderForm: '#icon-test46',
          client: '#icon-test131',
          warehouse: '#icon-test43',
          purchase: '#icon-test83',
          finance: '#icon-test57',
          statement: '#icon-test56',
          use: '#icon-test36',
          set: '#icon-test137'
        },
        '#1C69E6': {
          marketing: '#icon-test103',
          commodity: '#icon-test49',
          orderForm: '#icon-test58',
          client: '#icon-test154',
          warehouse: '#icon-test54',
          purchase: '#icon-test162',
          finance: '#icon-test111',
          statement: '#icon-test136',
          use: '#icon-test76',
          set: '#icon-test99'
        },
        '#20ADE5': {
          marketing: '#icon-text_icon3',
          commodity: '#icon-text_icon4',
          orderForm: '#icon-text_icon1',
          client: '#icon-text_icon6',
          warehouse: '#icon-text_icon5',
          purchase: '#icon-text_icon7',
          finance: '#icon-test73',
          statement: '#icon-test105',
          use: '#icon-test168',
          set: '#icon-test122'
        },
        '#0EC2B9': {
          marketing: '#icon-test177',
          commodity: '#icon-test135',
          orderForm: '#icon-test89',
          client: '#icon-test119',
          warehouse: '#icon-test87',
          purchase: '#icon-test190',
          finance: '#icon-test200',
          statement: '#icon-test147',
          use: '#icon-test82',
          set: '#icon-test109'
        },
        '#1B1B1B': {
          marketing: '#icon-test416',
          commodity: '#icon-test318',
          orderForm: '#icon-test402',
          client: '#icon-test329',
          warehouse: '#icon-test339',
          purchase: '#icon-test114',
          finance: '#icon-test349',
          statement: '#icon-test343',
          use: '#icon-test419',
          set: '#icon-test327'
        }
      },
      // 用于渲染的框架图集合
      themeColorIconNameApply: null,
      // 文字颜色
      fontColor: {
        '#EB382F': {
          fontColorStatic: '#997c7a', fontColorHover: '#EB382F'
        },
        '#FB6321': {
          fontColorStatic: '#A8897B', fontColorHover: '#FB6321'
        },
        '#CD5511': {
          fontColorStatic: '#7A6153', fontColorHover: '#CD5511'
        },
        '#DBAF58': {
          fontColorStatic: '#8A816E', fontColorHover: '#DBAF58'
        },
        '#FAB414': {
          fontColorStatic: '#A89872', fontColorHover: '#FAB414'
        },
        '#23982D': {
          fontColorStatic: '#6A806C', fontColorHover: '#23982D'
        },
        '#F566D3': {
          fontColorStatic: '#A3869C', fontColorHover: '#F566D3'
        },
        '#C38CFA': {
          fontColorStatic: '#9D91A8', fontColorHover: '#C38CFA'
        },
        '#1C69E6': {
          fontColorStatic: '#6A7A94', fontColorHover: '#1C69E6'
        },
        '#20ADE5': {
          fontColorStatic: '#6D8994', fontColorHover: '#20ADE5'
        },
        '#0EC2B9': {
          fontColorStatic: '#4B706E', fontColorHover: '#0EC2B9'
        },
        '#1B1B1B': {
          fontColorStatic: '#888888', fontColorHover: '#1B1B1B'
        }
      },
      // 初始化动态文字颜色
      InitColor: null
    }
  },
  watch: {
    stat () {
      // this.isCollapse = this.stat
      // console.log(this.stat, 'watch')
    },
    themeColor () {
      this.defauleTheme = this.themeColor
      this.InitColor = JSON.parse(JSON.stringify(this.fontColor[this.defauleTheme]))
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    },
    mouseoverState (themeSign) {
      // 图标变化
      var themeColorIconNameHover = JSON.parse(JSON.stringify(this.themeColorIconNameHover))
      var themeColorIconName = JSON.parse(JSON.stringify(this.themeColorIconName))
      var themeColorIconNameApply = JSON.parse(JSON.stringify(this.themeColorIconNameApply))
      // 先还原
      this.themeColorIconNameApply = JSON.parse(JSON.stringify(themeColorIconNameHover))
      // 再改变
      for (var key in themeColorIconNameApply[this.defauleTheme]) {
        if (key === themeSign) {
          themeColorIconNameApply[this.defauleTheme][key] = themeColorIconName[this.defauleTheme][themeSign]
        }
      }
      this.themeColorIconNameApply = JSON.parse(JSON.stringify(themeColorIconNameApply))
      // 文字变化
      this.InitColor = JSON.parse(JSON.stringify(this.fontColor[this.defauleTheme]))
    },
    mouseoutState (themeSign) {
      // 图标变化
      // 先还原
      let themeColorIconNameHover = JSON.parse(JSON.stringify(this.themeColorIconNameHover))
      let themeColorIconNameApply = JSON.parse(JSON.stringify(this.themeColorIconNameApply))
      for (var key in themeColorIconNameApply[this.defauleTheme]) {
        themeColorIconNameApply[this.defauleTheme][key] = themeColorIconNameHover[this.defauleTheme][key]
      }
      this.themeColorIconNameApply = JSON.parse(JSON.stringify(themeColorIconNameApply))
      // 文字变化
      this.InitColor = JSON.parse(JSON.stringify(this.fontColor[this.defauleTheme]))
    }
  },
  mounted () {
    this.themeColorIconNameApply = JSON.parse(JSON.stringify(this.themeColorIconNameHover))
    this.InitColor = JSON.parse(JSON.stringify(this.fontColor[this.defauleTheme]))
  }
}
</script>

<style scoped lang="scss">
.menuNavMain {
  height: 0 !important;
  width: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  display: inline !important;
  font-size: 16px;
}
// .el-submenu__title {
//   padding-left: 10px;
// }
.el-menu--collapse {
  // width: 108px;
  height: calc(100vh - 60px);
}
/deep/ .el-submenu__title {
  padding: 0 10px;
}
.navStyle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: none;
}
.navStyle:hover {
  background-color: #ffffff;
}
.navStyle > :nth-child(n + 1):hover {
  color: #20ade5;
}
/deep/ .is-opened {
  background-color: none !important;
  padding: 0;
}
.el-menu-item,
.el-submenu__title {
  height: 36px;
  line-height: 36px;
}

// .navStyle > :nth-child(2) {
//   position: absolute;
//   right: 20px;
// }
/deep/ .el-submenu__title:hover,
/deep/.el-submenu__title:focus {
  background-color: #dbf2fb !important;
}
.mainul:hover {
  /deep/ .el-submenu__title {
    background-color: #dbf2fb !important;
  }
}
/deep/ .el-menu,
/deep/ .el-menu--popup,
/deep/ .el-menu--popup-right-start {
  padding: 0 !important;
}
.settingS {
  width: 320px;
}
// .settingS .navStyle > :nth-child(3) {
//   position: absolute;
//   right: 20px;
// }
// .settingS .navStyle > :nth-child(2) {
//   margin-left: 50px;
// }
/deep/ .el-submenu__icon-arrow,
/deep/ .el-icon-arrow-right {
  display: none;
}
.elMenu1 {
  width: 108px;
}
.elMenu2 {
  width: 60px;
}
.icon {
  width: 20px;
  height: 20px;
  vertical-align: -5.4px;
  margin-right: 10px;
  // background-color: red !important;
}
// .el-menu-vertical-demo:not(.el-menu--collapse) {
//   width: 108px;
//   height: calc(100vh - 60px);
// }
// /deep/ .el-menu--collapse {
//   width: 60px;
//   height: calc(100vh - 60px);
// }
// /deep/ .el-submenu__icon-arrow {
//   display: none;
// }
// .el-submenuSt {
//   padding-left: 18px;
//   font-size: 16px;
// }
// /deep/ .el-menu--popup-bottom-start {
//   margin: 0 !important;
//   // top: 0;
// }
// /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
//   border: none;
// }
// /deep/ .el-submenu__title {
//   padding-left: 20px;
// }
// .lk {
//   left: 100px;
// }
// .navbbb {
//   left: 100px;
// }
// /deep/ .lk {
//   background-color: red !important;
// }
</style>
